<template>
  <div class="homePage">
    <div class="hometop">
      <router-link to="/">
        <a-icon type="left"
                class="icon" />
        <span class="h3">点餐</span>
      </router-link>
      <div class="chargeback">
        <div class="icon"></div>
        <a @click="tofour"
           class="span">个人订单</a>
        <span class="time">{{dataTime}}</span>
      </div>
    </div>
    <div class="title">
      <h3>欢迎使用青海省肿瘤医院点餐系统</h3>
    </div>
    <div class="restaurant">
      <div @click="updateCar">
        <a class="restaurantLeft"
           @click="toOrderFive('/orderFive')"></a>
      </div>
      <div @click="updateCar">
        <a class="restaurantRight"
           @click="toOrderFive('/orderTwo')"></a>
      </div>
    </div>
    <div class="prompt">
      <h3>温馨提示</h3>
      <p>本系统清真餐厅和营养餐厅菜品价格包含一次性餐具费及配送费</p>
      <p>当您在选择菜品确认下单后，不可退款（当食堂接到订单后，已进行配餐）</p>
      <p>祝您用餐愉快</p>
      <div style="width: 7.6rem;margin: 0 auto;">
        <div class="f-left">
          <p>联系电话</p>
          <p style="text-align:left">清真餐厅：0971-6369769</p>
          <p>营养餐厅：0971-6369676 &nbsp;0971-6362917</p>
        </div>
        <div class="f-right r-div">
          <p>送餐时段</p>
          <p class="r-two">早餐：07:30 - 08:40</p>
          <p class="r-three">午餐：11:00 - 13:30</p>
          <p>晚餐：17:30 - 19:00</p>
        </div>
      </div>
    </div>
    <div class="layder"
         v-if="showflag">
      <div class="lay-cont">
        <div class="stateimg">
          <img src="../../../../static/images/indexone/state03.png" />
        </div>
        <p v-if="showtite">当前时间不在点餐时间范围内!</p>
        <p v-if="showcont">暂无订单!</p>
      </div>
    </div>

  </div>
</template>

<script>
import urls from '../../../common.js'
export default {
  name: 'homePage',
  data () {
    return {
      nowTime: '2019年4月12日',
      showflag: false,
      showtite: false,
      showcont: false,
      bed_no: this.$store.state.bedNo,
      fourdata: [],
      dataTime: '',
      currentTime: '',
      timer: '',
      localtime: ''
    }
  },
  created () {
    // this.dateTimes()
    this.dataTime = this.dateObj.year + '年' + this.dateObj.month + '月' + this.dateObj.day + '日' + this.dateObj.hours + ':' + this.dateObj.minutes
    this.timer = setInterval(() => {
      this.dataTime = this.dateObj.year + '年' + this.dateObj.month + '月' + this.dateObj.day + '日' + this.dateObj.hours + ':' + this.dateObj.minutes
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    updateCar () {
      this.$store.state.car = [] // 返回上一页更新清空数组
    },
    dateTimes () { // 调用main.js的时间
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        this.dateObj.hours = this.addZero(data.getHours())
        this.dateObj.minutes = this.addZero(data.getMinutes())
        this.currentTime = this.dateObj.hours + ':' + this.dateObj.minutes
      })
    },
    toOrderFive (params) { // 判断时间点餐
      // this.dateTimes()
      // console.log(this.$store.state.orderPath)
      // this.localTimeFun()
      this.$store.commit('orderPathClick', params)
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        this.dateObj.hours = this.addZero(data.getHours())
        this.dateObj.minutes = this.addZero(data.getMinutes())
        this.currentTime = this.dateObj.hours + ':' + this.dateObj.minutes
        // console.log(this.currentTime)
        if (this.currentTime > '19:00') {
          this.showflag = true
          this.showtite = true
          setTimeout(() => {
            this.showflag = false
            this.showtite = false
          }, 3000)
        } else {
          this.$router.push(params)
        }
      })

      // let date = this.toLocaleString()
      // date.then(function (datas) {
      //   let data = new Date(datas.body)
      //   let hour = this.addZero(data.getHours())
      //   let minutes = this.addZero(data.getMinutes())
      //   let currentTime = hour + ':' + minutes

      //   if (currentTime >= '07:30' && currentTime <= '08:40') {
      //     this.$router.push(params)
      //   } else if (currentTime >= '11:00' && currentTime <= '13:30') {
      //     this.$router.push(params)
      //   } else if (currentTime >= '17:30' && currentTime <= '19:00') {
      //     this.$router.push(params)
      //   } else {
      //     this.$router.push(params)
      //     // this.orderflag = true
      //     // this.showtite = true
      //     // setTimeout(() => {
      //     //   this.showflag = false
      //     //   this.showtite = false
      //     // }, 3000)
      //   }
      // })
    },
    getPersonOrderList () { // 调个人订单接口
      console.log(this.bed_no)
      var that = this
      that.$http
        .get(urls.getPersonOrderList + '/' + that.bed_no)
        .then(result => {
          // 获取个人订单
          if (result.body.code === '200') {
            // console.log(result.body.data)
            that.fourdata = result.body.data
            if (this.fourdata.length > 0) {
              this.$router.push({ path: '/orderFour' })
            } else {
              this.showflag = true
              this.showcont = true
              setTimeout(() => {
                this.showflag = false
                this.showcont = false
              }, 3000)
            }
          }
        })
    },
    tofour () { // 判断个人订单接口是否有值
      this.getPersonOrderList()
      // if (this.fourdata.length > 0) {
      //   this.$router.push({ path: '/orderFour' })
      // } else {
      //   this.showflag = true
      //   this.showcont = true
      //   setTimeout(() => {
      //     this.showflag = false
      //     this.showcont = false
      //   }, 3000)
      // }
    },
    timeAdd0 (str) { // 时间不足补0
      if (str.length <= 1) {
        str = '0' + str
      }
      return str
    },
    localTimeFun () { // 获取本地时间
      let localHours = new Date().getHours().toString() // 时
      let localMin = new Date().getMinutes().toString() // 分
      this.localtime = this.timeAdd0(localHours) + ':' + this.timeAdd0(localMin)
      console.log(this.localtime)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.homePage
  position relative
  height 100%
  background url('../../../../static/images/Order1/bg.png') no-repeat
  background-size 100%
  .hometop
    width 19.2rem
    height 1rem
    line-height 1rem
    padding 0 0.3rem 0 0.35rem
    .icon
      vertical-align -0.18em
    .h3, .icon
      font-size 0.38rem
      font-weight bold
      color $color-main
    .chargeback
      height 100%
      float right
      line-height 1rem
      font-size 0.32rem
      .icon
        width 0.32rem
        height 0.32rem
        border-radius 50%
        background url('../../../../static/images/Order4/MuslimRes_Icon.png')
        background-size 100%
        margin 0.37rem 0.15rem 0 0
        float left
      .span
        color $color-orderone
      .time
        margin-left 0.6rem
        color $color-orderone
  .title
    margin-top 1.4rem
    text-align center
    margin-bottom 0.6rem
    h3
      font-size 0.46rem
      color #666666
      font-weight bold
  .prompt
    text-align center
    h3
      font-size 0.3rem
      margin-bottom 0.3rem
      color #666666
    p
      color #666666
      font-size 0.24rem
      &:nth-of-type(1)
        margin-bottom 0.2rem
      &:nth-of-type(2)
        margin-bottom 0.25rem
      &:nth-of-type(3)
        margin-bottom 0.35rem
      &:nth-of-type(4)
        margin-bottom 0.25rem
      &:nth-of-type(5)
        margin-bottom 0.09rem
    .r-div
      .r-two, .r-three
        margin-bottom 0.05rem
  .restaurant
    width 8rem
    height 3.6rem
    margin auto
    // margin-top: 2.72rem;
    .restaurantLeft, .restaurantRight
      width 3.6rem
      height 3.6rem
      border-radius 0.16rem
    .restaurantLeft
      background url('../../../../static/images/Order1/MuslimRes.png') no-repeat
      background-size 100%
      float left
    .restaurantRight
      background url('../../../../static/images/Order1/NutritionalRes.png') no-repeat
      background-size 100%
      float right
.layder
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  .lay-cont
    width 4rem
    height 2.3rem
    background-color rgba(0, 0, 0, 0.6)
    margin 4.8rem auto
    border-radius 0.3rem
    color #fff
    text-align center
    padding-top 0.4rem
    .stateimg
      width 0.78rem
      height 0.78rem
      margin 0 auto 0.4rem auto
      img
        width 100%
        height 100%
        display block
</style>
